<template>
  <div class="form-group">
    <label class="col-sm-4 control-label">选择片区：</label>
    <div class="col-sm-8">
      <select class="form-control select2" style="width: 100%;" v-model="selected" @change="$emit('input', $event.target.value)">
        <option value="" disabled selected style='display:none;'>请选择</option>
        <option value="全部">全部</option>
        <option v-for="lst in areaList" :value="lst.value" :key="lst.value">{{lst.label}}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number]
  },
  data() {
    return {
      areaList: [],
      selected: this.value
    };
  },
  mounted() {
    this.getSelOrderArea();
  },
  watch: {
    value() {
      this.selected = this.value;
    }
  },
  methods: {
    getSelOrderArea() {
      this.$api.ticket.list.selOrderArea().then(res => {
        if (res.success) {
          for (let item in res.data) {
            let arr = { label: "", value: "" };
            arr.label = res.data[item].areaName;
            arr.value = res.data[item].areaName;
            this.areaList.push(arr);
          }
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.control-label {
  padding: 0;
  line-height: 34px;
}
input,
select,
textarea {
  border-radius: 5px;
}
</style>
